import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:test1/page/search_page.dart';

import '../chat_screen.dart';

class MainFramePage extends StatefulWidget {
  const MainFramePage({Key? key}) : super(key: key);

  @override
  State<MainFramePage> createState() => _MainFramePageState();
}

class _MainFramePageState extends State<MainFramePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade100,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(35.0),
        child: AppBar(
          elevation: 0,
          backgroundColor: Colors.grey.shade100,
          title: Text("微信", style: TextStyle(color: Colors.black)),
        ),
      ),
      body: Container(
        color: Colors.white,
        child: ListView(
          children: [
            InkResponse(
              onTap: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
                  return SearchPage();
                }));
              },
              child: Hero(
                tag: "search",
                child: Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
                    width: MediaQuery.of(context).size.width,
                    height: 46,
                    color: Colors.grey.shade100,
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(6)),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Image.asset("asset/main/search.png",
                              width: 20, height: 20),
                          SizedBox(width: 6),
                           Text(
                            "搜索",
                            style: TextStyle(
                              color: Color(0xFFbfbfbf),
                              fontSize: 16,
                            ),
                          )
                        ],
                      ),
                    )),
              ),
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
            ChatItem(
              imageUrl:
                  'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name: "撕心裂肺1",
              message: "你说的啥我听不见",
              time: "12:23",
            ),
          ],
        ),
      ),
    );
  }
}

class ChatItem extends StatelessWidget {
  final String imageUrl;
  final String name;
  final String message;
  final String time;

  const ChatItem({
    Key? key,
    required this.imageUrl,
    required this.name,
    required this.message,
    required this.time,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkResponse(
      onTap: () {
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (BuildContext context) {
          return ChatScreen();
        }));
      },
      child: Container(
        padding: const EdgeInsets.only(top: 12, left: 12, right: 12),
        child: Row(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(6),
              child: SizedBox(
                width: 50,
                height: 50,
                child: CachedNetworkImage(
                  imageUrl: imageUrl,
                  placeholder: (context, url) =>
                      Container(color: Colors.grey.shade400),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                ),
              ),
            ),
            SizedBox(width: 12),
            Expanded(
              child: Container(
                padding: EdgeInsets.only(bottom: 4),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Colors.grey.shade100),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const SizedBox(height: 4),
                        Text(
                          name,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        const SizedBox(height: 3),
                        Text(
                          message,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: const TextStyle(color: Color(0xFFB9B9B9)),
                        ),
                      ],
                    ),
                    Text(
                      time,
                      style: TextStyle(
                        color: Color(0xFFC7C7C7),
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
